/**
*  Folha de estilo do sistema de notificações.
*  Autor: Jorge Rodrigues - fev/2019
*  Versao: 2.1
*/

.nAlertOver {
   position: fixed;
   display: block;
   z-index: 10000;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   background-color: rgba(221, 221, 221, 0.6);
}

.nAll {
   position: fixed;
   display: table;
   z-index: 100000;
   color: #000;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 15px;
   line-height: 20px;
   background-color: #f8f8f8;
   /* padding e a border não serão atribuidas a largura do elemento */
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

.nAlert {
   display: grid;
   grid-template-areas: '. . .';
   grid-template-columns: 40px auto 40px;
   max-width: 1000px;
   min-width: 370px;
   min-height: 40px;
   top: 50px;
   right: 50px;
   color: #fff;
   background-color: #222222;
   box-shadow: 2px 2px 10px -3px #808080
}

.nNotification {
   width: 420px;
   max-height: 500px;
   min-height: 100px;
   right: 10px;
   bottom: 10px;
   padding: 15px 0 0 0;
   margin-top: 0 !important;
   border: 1px solid #fd8725;
}
.nNotification .myText {
   max-height: 400px;
}


.nAlert p,
.nNotification p {
   margin: 0 0 10px 0;
}


.myIco {
   display: inline-block;
}
.myIco img {
   display: block;
   width: 40px;
   height: auto;
}
.myText {
   display: inline-block;
   min-width: 200px;
   padding: 10px 13px;
   vertical-align: top;
}


.childBtn {
   display: block;
   width: 40px;
   height: 40px;
   padding: 10px;
   border: none;
   color: #fff;
   background-color: #565656;
   text-align: center;
   cursor: pointer;
}



@media only screen and (max-width: 630px) {

   .nAlert {
      top: auto;
      bottom: 0;
      left: 0;
      right: 0;  /** left e right igual a zero faz se extender pela largura da tela. */
      max-height: 100vh;
   }

   .myText {
      max-height: 100vh;
      overflow-y: scroll;
      line-height: 1.5em;
   }

}


@media screen and (max-width: 420px) {

   .nAlert {
      min-width: 270px;
   }

   .nNotification {
      max-width: 320px;
      padding-left: 10px;
   }

}